---
title: Lista con elementos con varios estilos
description: Una guía para usar Fluid DnD con una lista de elementos con diferentes estilos.
---

import SingleVerticalListWithDiferentStyles from "@/components/svelte/SingleVerticalListWithDiferentStyles.svelte";
import { Code } from "@astrojs/starlight/components";

### Ejemplo de lista de elementos con diferentes estilos

Podemos ordernar la lista de elementos con diferentes `estilos`:

export const listOfNumbers = `
  const list = $state([
  {
    id: "1",
    style:
      "margin: 30px 0px; border-style: solid; border-width: 0.8rem; padding: 5px;",
    content: "1",
  },
  {
    id: "2",
    style:
      "margin: 20px 0px; border-style: solid; border-width: 0.6rem; padding: 10px;",
    content: "2",
  },
  {
    id: "3",
    style:
      "margin: 10px 0px; border-style: solid; border-width: 0.4rem; padding: 15px;",
    content: "3",
  }
])`

<Code code={listOfNumbers} lang="js" />

### Usando useDragAndDrop

Tu puedes pasar a cada elemento sus propios `estilos`.

:::caution
Cada elemento debe tener su propio `estilo` antes y después de cambiar su posición en la `lista` usando **Fluid DnD**. Evita stilos con **psedo-classes** como [nth-child](https://developer.mozilla.org/es/docs/Web/CSS/:nth-last-child), [nth-last-child](https://developer.mozilla.org/es/docs/Web/CSS/:nth-last-child), [nth-of-type](https://developer.mozilla.org/es/docs/Web/CSS/:nth-of-type), etc, porque añade estilos a los elementos de la lista basado en otras propiedades como la posición, número de hijos, etc.
:::

export const highlightsDnD = ['style={element.style}'];

export const listOfNumberInsideDnD = `
<ul use:parent class="block px-2 h-72">
  {#each list as element, index }
    <li
      class="border-solid pl-1 mt-1 border-2"
      data-index={index}
      style={element.style}
    >
      { element.content }
    </li>
  {/each}
</ul>
`;

<Code code={listOfNumberInsideDnD} lang="svelte" mark={highlightsDnD} />

### Resultado

Esto es lo que tienes como resultado:

<div class="p-8 bg-[var(--sl-color-gray-6)] h-96">
  <SingleVerticalListWithDiferentStyles client:load />
</div>
